<template>
	<!-- 职业培训 -->
	<view class="layout">
		<view class="Title">
			<view class="Search">
				<input type="text" placeholder="请输入关键字..." placeholder-style="color:#eee;"/>
			</view>
			<image class="fangdajing" src="../../../static/user/u12422.png" mode="aspectFill"></image>
		</view>
		<view class="Content">
			<view class="row">
				<image class="rowImage" src="../../../static/user/u12426.png" mode="widthFix"></image>
				<view class="item">
					<view class="itemTopBao">
						<view class="itemTopBaoLeft">
							<text class="itemTopBaoLeftTitle">种养殖技术</text>
							<text class="itemTopBaoLeftContent">广东省青秀区校区</text>
						</view>
						<view class="itemTopBaoRight">
							<text class="gratis">免费</text>
							<text class="Price">原价￥6000</text>
						</view>
					</view>
					<view class="ContentCenterLeft">
						<view class="ContentCenterLeftButtom">
							<view class="ContentCenterLeftButtomCondition">
								政府合作
							</view>
							<view class="ContentCenterLeftButtomCondition">
								实操教学
							</view>
							<view class="ContentCenterLeftButtomCondition">
								性价比高
							</view>
						</view>
					</view>
					<view class="itemButtom">
						<view class="itemButtomLeft">
							<text class="EventRegistration">活动报名中</text>
						</view>
						<view class="itemButtomRight">
							<text class="Application">报名数：</text>
							<text class="quantity">6582</text>
						</view>
					</view>
				</view>
			</view>
			<view class="row">
				<image class="rowImage" src="../../../static/user/u12438.png" mode="widthFix"></image>
				<view class="item">
					<view class="itemTopBao">
						<view class="itemTopBaoLeft">
							<text class="itemTopBaoLeftTitle">美容美发培训</text>
							<text class="itemTopBaoLeftContent">广东省北流职业培训</text>
						</view>
						<view class="itemTopBaoRight">
							<text class="gratis">免费</text>
							<text class="Price">原价￥6000</text>
						</view>
					</view>
					<view class="ContentCenterLeft">
						<view class="ContentCenterLeftButtom">
							<view class="ContentCenterLeftButtomCondition">
								政府合作
							</view>
							<view class="ContentCenterLeftButtomCondition">
								学会为止
							</view>
							<view class="ContentCenterLeftButtomCondition">
								实操教学
							</view>
						</view>
					</view>
					<view class="itemButtom">
						<view class="itemButtomLeft">
							<text class="EventRegistration">活动报名中</text>
						</view>
						<view class="itemButtomRight">
							<text class="Application">报名数：</text>
							<text class="quantity">5682</text>
						</view>
					</view>
				</view>
			</view>
			<view class="row">
				<image class="rowImage" src="../../../static/user/u12450.png" mode="widthFix"></image>
				<view class="item">
					<view class="itemTopBao">
						<view class="itemTopBaoLeft">
							<text class="itemTopBaoLeftTitle">粤菜师傅</text>
							<text class="itemTopBaoLeftContent">广东省崇左职业培训</text>
						</view>
						<view class="itemTopBaoRight">
							<text class="gratis">免费</text>
							<text class="Price">原价￥8200</text>
						</view>
					</view>
					<view class="ContentCenterLeft">
						<view class="ContentCenterLeftButtom">
							<view class="ContentCenterLeftButtomCondition">
								政府合作
							</view>
							<view class="ContentCenterLeftButtomCondition">
								学会为止
							</view>
							<view class="ContentCenterLeftButtomCondition">
								实操教学
							</view>
						</view>
					</view>
					<view class="itemButtom">
						<view class="itemButtomLeft">
							<text class="EventRegistration">活动报名中</text>
						</view>
						<view class="itemButtomRight">
							<text class="Application">报名数：</text>
							<text class="quantity">5682</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	
</script>

<style lang="scss" scoped>
	    .layout{
			padding: 20rpx 25rpx;
			.Title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 80rpx;
				
				.Search{
					height: 60rpx;
					width: 550rpx;
					border-radius: 30rpx;
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					background-color: #F2F2F2;
				}
				.fangdajing{
					width: 50rpx;
					height: 50rpx;
				}
			}
			.Content{
				margin: 20rpx 0;
				.row{
					border: 1px solid #ccc;
					border-radius: 0 0 15rpx 15rpx;
					box-shadow: -5rpx 5rpx 15rpx 8rpx rgba(40,40,40,0.1);
					margin: 50rpx 0;
					display: flex;
					justify-content: space-between;
					align-content: center;
					padding: 20rpx 15rpx 20rpx 20rpx;
					height: 22vh;
					.rowImage{
						width: 34%;
					}
					.item{
						width: 64%;
						.itemTopBao{
							margin-top: 5rpx;
							display:flex;
							justify-content: space-between;
							align-content: flex-start;
							height: 90rpx;
							margin-bottom: 20rpx;
							.itemTopBaoLeft{
								display: flex;
								justify-content: space-between;
								flex-direction: column;
								.itemTopBaoLeftTitle{
									font-size: 32rpx;
									font-weight: bold;
								}
								.itemTopBaoLeftContent{
									font-size: 28rpx;
								}
							}
							.itemTopBaoRight{
								display: flex;
								text-align: right;
								flex-direction: column;
								.gratis{
									font-size: 28rpx;
									color: #E7624B;
								}
								.Price{
									font-size: 28rpx;
									color: #888;
								}
							}
							
						}
						.ContentCenterLeft{
							margin: 20rpx 0;
							.ContentCenterLeftButtom{
								display: flex;
								align-items: center;
								margin: 8rpx 0;
								.ContentCenterLeftButtomCondition{
									border-radius: 8rpx;
									display: flex;
									justify-content: center;
									align-items: center;
									color: #90979F;
									font-size: 25rpx;
									background-color: #EEEFF8;
									padding: 5rpx 10rpx;
									margin-right: 10rpx;
								}
							}
						}

						.itemButtom{
							margin: 30rpx 0;
							display: flex;
							align-items: center;
							justify-content: space-between;
							font-size: 28rpx;
							.itemButtomLeft{
								.EventRegistration{
									color: #2F78FF;
								}
							}
							.itemButtomRight{
								.Application{
									color: #777;
								}
								.quantity{
									color: #2F78FF;
									
								}
							}
						}
					}
				}
			}
		}
</style>
